<!-- 表格拖动示例: 可拖动行 -->
<template>
  <div>
    <p>{{ dragText }}</p>
    <p>{{ arr }}</p>
    <div>
      <table class="table">
        <thead>
        <tr>
          <td>#</td>
          <td>姓名</td>
          <td>性别</td>
        </tr>
        </thead>
        <draggable tag="tbody" :list="arr" animation="500" @start="onStart" @end="onEnd">
          <tr v-for="item in arr" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.sex }}</td>
          </tr>
        </draggable>
      </table>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, ref} from "vue";
import {VueDraggableNext as draggable} from 'vue-draggable-next'

export default defineComponent({
  setup() {
    const dragText = ref('停止拖动')
    const arr = reactive([
      {id: 1, name: '张三', sex: '男'},
      {id: 2, name: '李四', sex: '男'},
      {id: 3, name: '王五', sex: '女'},
      {id: 4, name: '赵六', sex: '女'},
      {id: 5, name: '孙七', sex: '女'}
    ])
    const onStart = () => {
      dragText.value = '拖动中...'
    }
    const onEnd = () => {
      dragText.value = '停止拖动'
    }
    return {arr, dragText, onStart, onEnd}
  },
  components: {draggable}
})
</script>

<style scoped>
.table {
  width: 100%;
  display: table;
}

.table tbody {
  cursor: move;
}
</style>